<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标事件-进入和悬停(Mouse Events - Entry and Over)</title>
  <!-- 
  在JavaScript中，鼠标事件是用户与网页交互的重要组成部分。其中，"Entry" 和 "Over" 主要指的是鼠标进入和悬停在元素上的相关事件。这些事件可以用于创建动态和交互式的用户界面。
  一、鼠标事件概述
  1. 鼠标事件：鼠标事件是用户通过鼠标与网页元素交互时触发的事件。常见的鼠标事件包括点击、移动、进入、离开等。

  二、Entry 和 Over 事件
  1. mouseover 事件：
    - 当鼠标指针移动到某个元素上方时触发。此事件不仅在目标元素上触发，也会在其子元素上触发。
    - 适用于需要在鼠标悬停时显示提示信息、改变样式或执行其他操作的场景。
    const element = document.getElementById('myElement');
    element.addEventListener('mouseover', function() {
      element.style.backgroundColor = 'lightblue'; // 改变背景颜色
    });
  2. mouseout 事件：
    - 当鼠标指针离开某个元素时触发。此事件也会在子元素上触发。
    - 适用于需要在鼠标离开元素时执行操作的场景。
    const element = document.getElementById('myElement');
    element.addEventListener('mouseout', function() {
      element.style.backgroundColor = ''; // 恢复背景颜色
    });
  
  3. mouseenter 事件：
    - 当鼠标指针进入某个元素时触发。与 mouseover 不同的是，mouseenter 事件不会在子元素上触发，只在目标元素上触发。
    - 适用于需要在鼠标进入特定区域时执行操作的场景。
    const element = document.getElementById('myElement');
    element.addEventListener('mouseenter', function() {
      element.style.border = '2px solid red'; // 添加边框
    });
  4. mouseleave 事件：
    - 当鼠标指针离开某个元素时触发。与 mouseout 不同的是，mouseleave 事件不会在子元素上触发，只在目标元素上触发。
    - 适用于需要在鼠标离开特定区域时执行操作的场景。
    const element = document.getElementById('myElement');
    element.addEventListener('mouseleave', function() {
      element.style.border = ''; // 移除边框
    });

  三、总结
  - mouseover 和 mouseout：会在目标元素和其子元素上触发，适合需要处理子元素的场景。
  - mouseenter 和 mouseleave：只在目标元素上触发，更适合处理特定元素的鼠标进入和离开事件。
   -->
  <style>
    .mouseenter-mouseleave, .mouseover-mouseout {
      width: 200px;
      height: 200px;
      background-color: pink;
      overflow: hidden;
    }
   
    .mouseenter-mouseleave-children, .mouseover-mouseout-children {
      margin: 0 auto;
      margin-top: 25px;
      width: 100px;
      height: 100px;
      background-color: lightgray;
    }
  </style>
</head>
<body>

  <h3>1. 第一组: mouseenter and mouseleave</h3>
  <p>mouseenter: 当鼠标指针进入某个元素时触发。与 mouseover 不同的是，mouseenter 事件不会在子元素上触发，只在目标元素上触发。</p>
  <p>mouseleave: 当鼠标指针离开某个元素时触发。与 mouseout 不同的是，mouseleave 事件不会在子元素上触发，只在目标元素上触发。</p>
  <div class="mouseenter-mouseleave">
    <div class="mouseenter-mouseleave-children">鼠标进入和离开</div>
  </div>

  <h3>2. 第二组: mouseover and mouseout</h3>
  <p>mouseover: 当鼠标指针移动到某个元素上方时触发。此事件不仅在目标元素上触发，也会在其子元素上触发。</p>
  <p>mouseout: 当鼠标指针离开某个元素时触发。此事件也会在子元素上触发。</p>
  <div class="mouseover-mouseout">
    <div class="mouseover-mouseout-children">鼠标进入和离开</div>
  </div>

  <script>
    // 1. mouseenter 和 mouseleave
    var mouseenterMouseleave = document.querySelector('.mouseenter-mouseleave')
    var mouseenterMouseleaveChildren = document.querySelector('.mouseenter-mouseleave-children')
    mouseenterMouseleave.addEventListener('mouseenter', function (event) {
      console.log('mouseenter - 鼠标进入', event.currentTarget, event.target);
      mouseenterMouseleaveChildren.style.backgroundColor = 'red'
    })
    mouseenterMouseleave.addEventListener('mouseleave', function (event) {
      console.log('mouseleave - 鼠标离开', event.currentTarget, event.target);
      mouseenterMouseleaveChildren.style.backgroundColor = 'orange'
    })
    
    mouseenterMouseleaveChildren.onmouseenter = function () {
      console.log('children_onmouseenter - 鼠标进入');
      this.style.border = '1px solid black'
    }
    mouseenterMouseleaveChildren.onmouseleave = function () {
      console.log('children_onmouseleave - 鼠标离开');
      this.style.border = '1px solid white'
    }

    // 2. mouseover 和 mouseout
    var mouseoverMouseout = document.querySelector('.mouseover-mouseout')
    var mouseoverMouseoutChildren = document.querySelector('.mouseover-mouseout-children')
    mouseoverMouseout.addEventListener('mouseover', function (event) {
      console.log('mouseover - 鼠标进入', event.currentTarget, event.target);
      mouseoverMouseoutChildren.style.backgroundColor = 'red'
    })
    mouseoverMouseout.addEventListener('mouseout', function () {
      console.log('mouseout - 鼠标离开', event.currentTarget, event.target);
      mouseoverMouseoutChildren.style.backgroundColor = 'orange'
    })
  </script>
  
</body>
</html>